import React from "react";
import axios from '../../../util/http';
import * as url from '../../../util/api'
import { Select, Input, Button, Table } from 'antd'
import {Link} from 'react-router-dom'
import './CombinationPromotion.css'
const { Option } = Select;
const { Search } = Input;
export default class CombinationPromotion extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,
    };
    this.columns = [
      {
        title: '促销主题',
        dataIndex: 'name',
      },
      {
        title: '商品',
        dataIndex: 'product',
      },
      {
        title: '状态',
        dataIndex: 'type',
      },
      {
        title: '促销内容',
        dataIndex: 'word',
      },
      {
        title: '促销区域',
        dataIndex: 'address',
      },
      {
        title: '促销对象',
        dataIndex: 'object',
      },
      {
        title: '促销经销商标签',
        dataIndex: 'title',
      },
    ];
    // for (let i = 0; i < 46; i++) {
    //   this.state.Data.push({
    //     key: i,
    //     name: `Edward King ${i}`,
    //     age: 32,
    //     address: `London, Park Lane no. ${i}`,
    //   });
    // }
  }
  onSelectChange = selectedRowKeys => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    this.setState({ selectedRowKeys });
  };
  handleChange(value) {
    console.log(`selected ${value}`);
  }
  render() {
    let { data, loading, selectedRowKeys } = this.state
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    const hasSelected = selectedRowKeys.length > 0;
    return (
      <div>
        <div className={'search'}>
          <div className={'searchLeft'}>
            <Select defaultValue="全部状态" className={'Select3'} onChange={this.handleChange}>
              <Option value="全部状态">全部状态</Option>
              <Option value="未开始">未开始</Option>
              <Option value="促销中">促销中</Option>
              <Option value="已过期">已过期</Option>
              <Option value="已作废">已作废</Option>
            </Select>
            <div className={'searchRight'}>
              <Search
                placeholder="请输入促销主题/商品名称/编码"
                onSearch={value => console.log(value)}
                style={{ width: 400 }}
              />
            </div>
          </div>
          <Link to="/homepage/newcombinationpromotion">
            <Button className={'button'} style={{ backgroundColor: '#4BD0B6', border: '#4BD0B6' }} type="primary">新增</Button>
          </Link>
          
        </div>
        <div className={'table'}>
          <div style={{ marginBottom: 16 }}>
            <Button type="primary" onClick={this.start} disabled={!hasSelected} loading={loading}>
              Reload
          </Button>
            <span style={{ marginLeft: 8 }}>
              {hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}
            </span>
          </div>
          <Table rowSelection={rowSelection} columns={this.columns} dataSource={data} />
        </div>
      </div>
    );
  }
  componentDidMount() {
    axios({
      url: url.PostZhcxData,
      method: 'post'
    }).then(res => {
      console.log(res.data.data)
      let data = res.data.data.filter((item) => {
        item.key = item.id
        delete item.id
        return item
      })
      this.setState({
        data:data
      })
    })
  }
}

